<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="80%" height="80%" draggable>
    <div>
      <el-card shadow="never">
        <listView :list="sum" />
        <el-table max-height="70vh" v-loading="loading" :data="advertiserEverydayCostList">
          <el-table-column label="时间" fixed prop="thatdayHoursDate" minWidth="160"></el-table-column>
          <el-table-column label="账户消耗" prop="cost" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.cost) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增充值" prop="thatdayTotalAmount" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.thatdayRegisterTotalAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增分成金额" prop="thatdayDividendAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.thatdayRegisterDividendAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增广告收益" prop="iaaTotalAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.iaaRegisterTotalAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新增广告分成" prop="iaaDividendAmount" width="140" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.iaaRegisterDividendAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="利润" prop="thatdayProfitAmount" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.thatdayProfitAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回本率" prop="extRecoveryRate" minWidth="120">
            <template #default="{ row }">
              <span>{{ formatPrice(row.extRecoveryRate) }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="展示数" prop="show" width="120" sortable></el-table-column>
          <el-table-column label="平均千次展现费用" prop="avgShowCost" width="170" sortable></el-table-column>
          <el-table-column label="点击数" prop="click" width="120" sortable></el-table-column>
          <el-table-column label="点击成本" prop="avgClickCost" width="120" sortable></el-table-column>
          <el-table-column label="点击率" prop="ctr" width="120" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.ctr) }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="转化数" prop="convert" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化成本" prop="convertCost" minWidth="110" sortable></el-table-column>
          <el-table-column label="转化率" prop="convertRate" minWidth="110" sortable>
            <template #default="{ row }">
              <span>{{ formatPrice(row.convertRate) }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="激活数" prop="active" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费人数" prop="thatdayPaidUseNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费次数" prop="thatdayPaidTotalNum" minWidth="110" sortable></el-table-column>
          <el-table-column label="付费成本" prop="extPayCost" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extPayCost }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客单价" prop="extAvgPrice" minWidth="110">
            <template #default="{ row }">
              <span>{{ row.extAvgPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column label="回传率" prop="" minWidth="110">
            <template #default="{ row }"> {{ formatPrice(row.returnRate) }}% </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { getOceEverydayHoursTotalCost } from '@/api/oce/advertiserEverydayCost';
import { AdvertiserEverydayCostForm, AdvertiserEverydayCostQuery, AdvertiserEverydayCostVO } from '@/api/oce/advertiserEverydayCost/types';
import { formatPrice } from '@/utils';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const advertiserEverydayCostList = ref<AdvertiserEverydayCostVO[]>([]);
const loading = ref(true);
const dialog = reactive<DialogOption>({
  visible: false,
  title: '总数据消耗时速'
});
const initFormData: AdvertiserEverydayCostForm = {
  advertiserCostId: undefined,
  referralLinkId: undefined,
  referralLinkType: undefined,
  referralLinkName: undefined,
  thirdAdvertiserAppCode: undefined,
  thirdAdvertiserId: undefined,
  thirdAdvertiserName: undefined,
  thatdayTimestamp: undefined,
  thatdayDate: undefined,
  thatdayTotalAmount: undefined,
  thatdayDividendAmount: undefined,
  thatdayProfitAmount: undefined,
  thatdayPaidTotalNum: undefined,
  thatdayPaidUseNum: undefined,
  thatdayRegisterTotalAmount: undefined,
  thatdayRegisterDividendAmount: undefined,
  iaaTotalAmount: undefined,
  iaaDividendAmount: undefined,
  iaaProfitAmount: undefined,
  iaaRegisterTotalAmount: undefined,
  iaaRegisterDividendAmount: undefined,
  dramaTitle: undefined,
  cost: undefined,
  show: undefined,
  avgShowCost: undefined,
  click: undefined,
  avgClickCost: undefined,
  ctr: undefined,
  convert: undefined,
  convertCost: undefined,
  convertRate: undefined,
  active: undefined,
  activeCost: undefined,
  activeRate: undefined,
  activePay: undefined,
  activePayCost: undefined,
  activePayRate: undefined,
  gamePayCount: undefined,
  gamePayCost: undefined,
  costHoursSpeed: undefined,
  createName: undefined,
  appType: undefined,
  deptId: undefined,
  extRecoveryRate: undefined,
  extAvgPrice: undefined,
  dramaId: undefined,
  startDate: undefined,
  endDate: undefined,
  extPayCost: undefined
};
const data = reactive<PageData<AdvertiserEverydayCostForm, AdvertiserEverydayCostQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    iaaFlag: 0,
    referralLinkId: undefined,
    referralLinkType: undefined,
    referralLinkName: undefined,
    thirdAdvertiserAppCode: undefined,
    thirdAdvertiserId: undefined,
    thirdAdvertiserName: undefined,
    thatdayTimestamp: undefined,
    thatdayDate: undefined,
    thatdayTotalAmount: undefined,
    thatdayDividendAmount: undefined,
    thatdayProfitAmount: undefined,
    thatdayPaidTotalNum: undefined,
    thatdayPaidUseNum: undefined,
    thatdayRegisterTotalAmount: undefined,
    thatdayRegisterDividendAmount: undefined,
    iaaTotalAmount: undefined,
    iaaDividendAmount: undefined,
    iaaProfitAmount: undefined,
    iaaRegisterTotalAmount: undefined,
    iaaRegisterDividendAmount: undefined,
    dramaTitle: undefined,
    cost: undefined,
    show: undefined,
    avgShowCost: undefined,
    click: undefined,
    avgClickCost: undefined,
    ctr: undefined,
    convert: undefined,
    convertCost: undefined,
    convertRate: undefined,
    active: undefined,
    activeCost: undefined,
    activeRate: undefined,
    activePay: undefined,
    activePayCost: undefined,
    activePayRate: undefined,
    gamePayCount: undefined,
    gamePayCost: undefined,
    costHoursSpeed: undefined,
    createName: undefined,
    appType: undefined,
    deptId: undefined,
    extRecoveryRate: undefined,
    extAvgPrice: undefined,
    extPayCost: undefined,
    dramaId: undefined,
    params: {}
  },
  rules: undefined
});

const { queryParams, form } = toRefs(data);
const sum = ref([]);

/** 查询巨量广告主每日消耗记录列表 */
const getList = async () => {
  loading.value = true;
  const res = await getOceEverydayHoursTotalCost(queryParams.value);
  advertiserEverydayCostList.value = res.rows;
  sum.value = res.sum;
  loading.value = false;
};
const show = (data) => {
  dialog.visible = true;
  queryParams.value = data;
  getList();
};

defineExpose({ show });
</script>
